<template>
	<!-- 内部页面  狗窝内 -->
	<view  id="inside">
		<navbar @height="height">
			<view slot="header">
				<view @click="back" style="width: 30px;height: 45px;line-height: 45px;margin-left: 20px;">
					<u-icon name="arrow-left" size="30" color="#ffffff"></u-icon>
				</view>
			</view>
		</navbar>
		<!-- <view :style="{'height':zheight+'px'}"></view> -->
		<view  class="bigBox">
			<view class="bigBox1">
				<view class="bigBox2">
					<view class="bigBox3">
						<view class="bigBox4">
			<!-- 返回按钮 -->
			<!-- <view  class="returnBtn">
				<image  mode="widthFix" style="width: 70rpx;" @click="returnBtn" src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/icon_return.png">
			</view > -->
			<!-- 帮助、商城图标 -->
			<!-- <view  class="icon"><image  mode="widthFix"  class="toolIcon" @click="openHelp" src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/helpIcon.png"></view > -->
			<view  class="icon" :style="{'margin-top':zheight+'px'}" style="margin-top:45rpx;position:absolute;z-index: 9;">
				<view style="margin-bottom: 30px;color: #fff;">
					葵花籽：{{sunflower_seed}}
				</view>
				<image  class="toolIcon"  mode="widthFix" @click="openShop" src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/shopIcon.png">
			</view >
			<!-- <view  style="margin-top:-120rpx">
				<image  mode="widthFix" style="width: 750rpx;" src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/house.png">
			</view > -->
			<!-- 椅子，狗盆部分 -->
			<view  class="chair">
				<image  mode="widthFix" style="width: 253rpx;" src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/chair.png">
				<image  mode="widthFix" style="width: 164rpx;" src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/wanIcon.png">
			</view >
			<!-- 底部图标 -->
			<view  class="bottomBtn">
				<image  class="toolIcon"  mode="widthFix" @click="openBag" src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/bagIcon.png">
				<!-- <image   class="toolIcon" mode="widthFix" @click="feedFood" src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/feedIcon.png"> -->
			</view >
			<!-- 悬浮窗 -->
			<!-- <view  class="dialog" v-if="dialogShow">
				<image  mode="widthFix" class="closeIcon" @click="dialogShow = false" src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/closeIcon.png">
				<view  class="title">{{dialogTitle}}</view >
				<view  v-if="dialogTitle=='帮助'">
					<view  class="itemList" :style="index!=helpData.length-1?'border-bottom:1rpx solid #ccc':''"
						v-for="(item,index) in helpData" :key="index">
						{{item.des}}
						<span class="rightIcon">></span>
					</view >
				</view >
				<view  v-if="dialogTitle=='商城'">
					<view  class="tabChange">
						<span @click="changeFood('food')" class="foodTab"
							:class="tabActive=='food'?'tabActive':''">食物</span>|<span @click="changeFood('tool')"
							class="toolTab" :class="tabActive=='tool'?'tabActive':''">道具</span>
					</view >
					<view  class="bagBox">
						<view  v-for="(item,index) in shopData" :key="index">
							<image  mode="widthFix" :src="item.image" />
							<view  class="useGoodsBtn" @click="buyGoogs(item)">￥{{item.price}} | 购</view >
						</view >
					</view >
				</view >
				<view  v-if="dialogTitle=='背包'" class="bagBox">
					<view  v-for="(item,index) in bagData" :key="index">
						<image  mode="widthFix" :src="item.image" />
						<view  class="useGoodsBtn" @click="bagItemClick(item)">使用</view >
					</view >
				</view >
			</view > -->
			</view>
			</view>
			</view>
			</view>
			<view class="dialog" v-if="dialogShow">
			<view v-if="dialogTitle=='商城'">
			  <store @select="select" @type="gettype" :storeList="storeList" :dialogTitle="dialogTitle" @onCloseClick="onCloseClick" />
			</view>
			<view v-if="dialogTitle=='背包'" class="">
			  <backpack @backselect="backselect" :packList="packList" :dialogTitle="dialogTitle" @onCloseClick="onCloseClick" />
			</view>
			</view>
		</view >
	</view >
</template>

<script>
	import store from '../../components/store.vue'
	import backpack from '../../components/backpack.vue'
	import navbar from '@/components/navbar.vue';
	export default {
		name: "inside",
		components: {
		backpack,
		store,
		navbar
		},
		data() {
			return {
				storeList:[],
				packList:[],
				dialogShow: false,
				dialogData: {},
				dialogTitle: '',
				tabActive: 'food',
				zheight:0,
				helpData: [{
						des: '关于商品退款'
					},
					{
						des: '关于资讯回复时间'
					},
					{
						des: '联系客服'
					},
					{
						des: '关于付费咨询后，律师未回复'
					},
				],
				bagData: [{
						image: 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/bagIcon.png',
						name: '物资1'
					},
					{
						image: 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/bagIcon.png',
						name: '物资2'
					},
					{
						image: 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/bagIcon.png',
						name: '物资3'
					},
					{
						image: 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/bagIcon.png',
						name: '物资4'
					},
					{
						image: 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/bagIcon.png',
						name: '物资5'
					},
					{
						image: 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/bagIcon.png',
						name: '物资6'
					},
				],
				shopData: [],
				foodData:[
					{
						image: 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/bagIcon.png',
						name: '食物1',
						price: 50
					},
					{
						image: 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/bagIcon.png',
						name: '食物2',
						price: 40
					},
					{
						image: 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/bagIcon.png',
						name: '食物3',
						price: 30
					},
					{
						image: 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/bagIcon.png',
						name: '食物4',
						price: 50
					},
					{
						image: 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/bagIcon.png',
						name: '食物5',
						price: 20
					},
					{
						image: 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/bagIcon.png',
						name: '食物6',
						price: 45
					},
				],
				toolData:[
					{
						image: 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/feedIcon.png',
						name: '道具1',
						price: 50
					},
					{
						image: 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/feedIcon.png',
						name: '道具2',
						price: 40
					},
					{
						image: 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/feedIcon.png',
						name: '道具3',
						price: 30
					},
					{
						image: 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/feedIcon.png',
						name: '道具4',
						price: 50
					},
					{
						image: 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/feedIcon.png',
						name: '道具5',
						price: 20
					},
					{
						image: 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/feedIcon.png',
						name: '道具6',
						price: 45
					},
				],
				sunflower_seed:0
			};
		},
		mounted() {
			this.shopData = [...this.foodData]
			this.getprops()
			this.adopt()
			this.sunflower()
			this.uinfo()
			console.log(this.vuex_user,'vuex_uservuex_uservuex_user')
		},
		methods: {
			height(e){
				this.zheight=e
			},
			back(){
				uni.navigateBack()
			},
			async uinfo(){
				let res = await this.$u.api.uinfo()
				console.log(res,'gggggggggg')
				this.sunflower_seed=res.sunflower_seed
			},
			openShop() {
				this.dialogShow = true
				this.dialogTitle = '商城'
				this.shopData = [...this.foodData]
			},
			// 关闭弹窗
			onCloseClick() {
				this.dialogShow = false
				// this.getprops()
			},
			// 领取道具,领取食物
			select(e){
				this.buy_prop(e[0],e[1].id)
			},
			// 购买食物
			// 购买道具
			async buy_prop(type,id){
				if(type==0){
					let data={
						prop_id:id
					}
					let res = await this.$u.api.buy_prop(data)
					// if(this.ieem.price!=0){
						this.ttpay(res.pay_info)
					// }
				}else{
					let data={
						food_id:id
					}
					let res = await this.$u.api.buy_foods(data)
					uni.showToast({
						title:"购买成功",
						icon:'none'
					})
					this.uinfo()
				}	
			},
			ttpay(pay_info){
				uni.requestPayment({
					provider: 'toutiao',
					orderInfo: pay_info,
					service: 5,
					success: res => {
						console.log(res,'ffffffffffffffffffffssssssssss')
						if(res.code==0){
							uni.showToast({
								title: '付款成功'
							});
						}
						if(res.code==4){
							uni.showToast({
								title: '用户取消付款',
								icon: 'none'
							});
						}
					},
					fail: e => {
						uni.showToast({
							title: e.errMsg,
							icon: 'none'
						});
						// r(e);
					}
				});
			},
			async goumai(){
				let res = await this.$u.api.seed_meal()
				this.goumailist=res
				this.show2=true
				this.shows=false
			},
			// 购买向日葵套餐
			async adopts(e){
				let data={
					meal_id:e
				}
				let res= await  this.$u.api.buy_seed(data)
				this.ttpay(res.pay_info)
			},
			// 向日葵状态
			async sunflower(){
				let data={
					my_space_id:this.vuex_user_content.id
				}
				let res = await this.$u.api.sunflower(data)
				console.log(res,'vvvvvvv')
				this.time=res.surplus_sec
				
			},
			async jiasu(){
				let res = await this.$u.api.reduction_time()
				this.sunflower()
				uni.showToast({
					title:'加速成功',
					title:"none"
				})
			},
			getFood(){
				this.sunflower()
				this.shows=true
			},
			async shouqu(e){
				console.log(e,'eeeeeeeeeee')
				let res = await this.$u.api.seed()
				console.log(res,'gggggg')
				uni.showToast({
					title:'收取成功',
					title:"none"
				})
				this.sunflower()
			},
			// 我的背包
			async petbag(){
				let res= await this.$u.api.petbag()
				this.packList=res
			},
			// 背包道具 食物使用
			backselect(e){
				console.log(e,'fffff')
				e.type==2?this.use_prop(e.id):this.feeding(e.id)
				this.dialogShow = false
			},
			//投喂背包食物
			async feeding(id){
				let data={
					bag_id:id
				}
				let res = await this.$u.api.feeding(data)
				console.log(res)	
				uni.showToast({
					title:'投喂成功',
					icon:'none'
				})
			},
			
			//使用道具
			async use_prop(id){
				let data={
					bag_id:id
				}
				let res = await this.$u.api.use_prop(data)
				console.log(res)	
				uni.showToast({
					title:'道具使用成功',
					icon:'none'
				})
			},
			async petlist(){
				let res= await this.$u.api.petlist()
				console.log(res,'宠物列表')
				this.petList=res
			},
			//查询领取宠物状态，领取宠物
			async adopt(e){
				let data={}
				if(e){
					data.pet_id=e
				}
				let res = await this.$u.api.adopt(data)
				res==null?this.show=true:(this.src=res.pet_image,this.show=false,this.$u.vuex('vuex_dogName',res.pet_name))
				
				// https://yunkeososyunchuc.bc8t.cn/lianaikongjian/gouwoshuoye/3.gif
				console.log(res,'ffffffff')
			},
			
			//道具切换
			gettype(e){
				console.log(e,'ggggggggg')
				e==0?this.getprops():this.foods()
			},
			//获取食物列表
			async foods(){
				let res= await this.$u.api.foods()
				this.storeList=res
				console.log(res,'ggggggggggggg')
			},
			
			//获取道具列表
			async getprops(){
				let res= await this.$u.api.props()
				this.storeList=res
				console.log(res,'ggggggggggggg')
			},
			// 随机事件
			suiji(){
				const { windowWidth, windowHeight } = uni.getSystemInfoSync();
				console.log(windowWidth,windowHeight ,1480*(windowHeight/2361))
				this.width=1480*(windowHeight/2361)
				this.height=windowHeight
				// console.log(Math.floor(Math.random()*10))
				// this.top=Math.floor(Math.random()*this.height-120)
				// this.left=Math.floor(Math.random()*this.width-120)
				// setTimeout(()=>{
				// 	this.suiji()
				// },3000)
			},
			// 点击帮助事件 
			openHelp() {
				this.dialogShow = true
				this.dialogTitle = '帮助'
			},
			// 点击商城事件
			openShop() {
				this.dialogShow = true
				this.dialogTitle = '商城'
				this.shopData = [...this.foodData]
			},
			// 点击背包事件
			openBag() {
				this.dialogShow = true
				this.dialogTitle = '背包'
				this.petbag()
			},
			// 点击记录事件
			// 点击记录事件
			openRecord() {
			  this.dialogShow = true
			  this.dialogTitle = '探险记录'
			  this.explore_record()
			  // this.shopData = [...this.recordToolData]
			  
			},
			//探险记录
			async explore_record(){
				let res = await this.$u.api.explore_record()
				// if(res.sceneryImg)
				this.listdata=res
			},
			// // 点击返回按钮事件
			// returnBtn(){
			// 	console.log('点击返回按钮了')
			// },
			// // 点击帮助事件
			// openHelp() {
			// 	this.dialogShow = true
			// 	this.dialogTitle = '帮助'
			// },
			// // 点击商城事件
			// openShop() {
			// 	this.dialogShow = true
			// 	this.dialogTitle = '商城'
			// },
			// // 点击背包事件
			// openBag() {
			// 	this.dialogShow = true
			// 	this.dialogTitle = '背包'
			// },
			// // 点击投喂图标事件
			// feedFood() {
			// 	console.log('点击投喂了')
			// },
			// // 点击背包中的物资事件
			// bagItemClick(item) {
			// 	console.log('点击背包中的物资了')
			// },
			// // 商城中tab切换为食物的事件
			// changeFood(type) {
			// 	this.tabActive = type
			// 	if(type=='food') this.shopData = [...this.foodData]
			// 	else this.shopData = [...this.toolData]
			// },
			// // 点击购买商品事件
			// buyGoogs(item){
			// 	console.log('点击购买商品了')
			// },
		}
	}
</script>

<style>
	.toolIcon{
		width: 83rpx;
		height: 84rpx;
	}
	.bigBox { 
		width: 750rpx;
		height:100vh;
		background: url("https://yunkeososyunchuc.bc8t.cn/lianaikongjian/gouwonei/1.png");
		background-size: cover;
		background-position: 0% 100%;
		position: relative;
	}
	.bigBox1 {
		width: 750rpx;
		height:100vh;
		background: url("https://yunkeososyunchuc.bc8t.cn/lianaikongjian/gouwonei/2.png");
		background-size: cover;
		background-position: 0% 100%;
		position: relative;
	}
	.bigBox2 {
		width: 750rpx;
		height:100vh;
		background: url("https://yunkeososyunchuc.bc8t.cn/lianaikongjian/gouwonei/3.png");
		background-size: cover;
		background-position: 0% 100%;
		position: relative;
	}
	.bigBox3 {
		width: 750rpx;
		height:100vh;
		background: url("https://yunkeososyunchuc.bc8t.cn/lianaikongjian/gouwonei/4.png");
		background-size: cover;
		background-position: 0% 100%;
		position: relative;
	}
	.bigBox4 {
		width: 750rpx;
		height:100vh;
		/* background: url("https://yunkeososyunchuc.bc8t.cn/lianaikongjian/gouwonei/5.png"); */
		background-size: cover;
		background-position: 0% 100%;
		position: relative;
	}
	.returnBtn image {
		display: inline-block;
		margin: 80rpx 0 0 30rpx;
		cursor: pointer;
	}

	.icon {
		margin: 55rpx 0 0 45rpx;
		position: relative;
	}

	.chair {
		margin: 0 0 0 15rpx;
		position: absolute;
		bottom: 230rpx;
	}

	.chair image:first-child {
		margin-right: 150rpx
	}

	.bottomBtn {
		box-sizing: border-box;
		padding:0 50rpx;
		display: flex;
		justify-content: space-between;
		width: 100%;
		position: absolute;
		bottom: 60rpx;
	}

	.icon image,
	.bottomBtn image {
		cursor: pointer;
	}

	.dialog {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 1;
		transform: translate(-50%, -50%);
		width: 98%;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 5rpx;
		padding: 20rpx 30rpx;
		font-size: 24rpx;
	}

	.title {
		text-align: center;
		margin-bottom: 20rpx;
	}

	.closeIcon {
		position: absolute;
		right: 15rpx;
		top: 15rpx;
		cursor: pointer;
		transform: scale(1.5);
		width: 26rpx;
	}

	.itemList {
		padding: 8rpx 10rpx;
		color: #666;
		cursor: pointer;
	}

	.rightIcon {
		font-size: 20rpx;
		float: right;
		transform: scaleY(1.6);
	}

	.bagBox {
		margin: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
		align-items: flex-start;
	}

	.bagBox>view  {
		width: 25%;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.bagBox image {
		width: 90rpx;
		height: 90rpx;
		display: inline-block;
		margin-bottom: 8rpx;
	}

	.useGoodsBtn {
		margin: 0 auto;
		width: 90%;
		padding: 6rpx 0;
		background-color: rgba(0, 0, 0, 0.1);
		border-radius: 30rpx;
		cursor: pointer;
	}

	.tabChange {
		width: 42%;
		margin: -10rpx 0 20rpx;
		border-radius: 20rpx;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.foodTab {
		display: inline-block;
		box-sizing: border-box;
		width: 48%;
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		padding: 6rpx 10rpx 6rpx 0;
		text-align: right;
		cursor: pointer;
	}

	.toolTab {
		display: inline-block;
		box-sizing: border-box;
		width: 49%;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		padding: 6rpx 0 6rpx 10rpx;
		cursor: pointer;
	}
	.tabActive{
		background-color: rgba(11, 137, 255, 0.6);
		color: #fff;
	}
</style>
